<template>
  <!-- 管理员弹框 -->
  <a-modal
    :title="questionStepTitle"
    width="1000px"
    centered
    :visible="questionStepVisible"
    :maskClosable="false"
    okText="确定"
    @ok="submitInform()"
    @cancel="closeDraw"
  >
    <div class="select-content">
      <a-row style="height: 100%">
        <a-col :span="8" style="height: 100%">
          <div class="section-content">
            <div class="section-title">选择题目</div>
            <div class="section-list">
              <ul>
                <li
                  v-for="(item, index) in questionListData"
                  :key="item.id"
                  @click="selectQuestionClick(item, index)"
                  :title="item.question"
                  :class="{ active: activeIndex === index }"
                >
                  <span>{{index+1}}：{{ item.question }}</span>
                </li>
              </ul>
            </div>
          </div>
        </a-col>
        <a-col :span="8" style="height: 100%">
          <div
            class="section-content"
            style="border-left: none; border-right: none"
          >
            <div class="section-title">选择步骤</div>
            <div class="section-list">
              <a-tree
                :tree-data="treeData"
                :show-line="showLine"
                :show-icon="showIcon"
                @select="onTreeSelect"
                defaultExpandAll
                v-if="treeData.length>0"
              >
              </a-tree>
              <a-empty :image="simpleImage" style="margin:48px 0;" v-else />
            </div>
          </div>
        </a-col>
        <a-col :span="8" style="height: 100%">
          <div class="section-content">
            <div class="section-title">选择操作</div>
            <div class="section-list step">
                <ul v-if="stepData.length>0">
                    <li
                    v-for="(item, index) in stepData"
                    :key="item.nodeId"
                    @click="selectStep(item, index)"
                    :title="item.nodeContent"
                    :class="{ active: activeStepIndex === index }"
                    >
                    <span>{{index+1}}：{{item.nodeContent}}</span>
                    </li>
              </ul>
              <a-empty :image="simpleImage" style="margin:48px 0;" v-else />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import questionList from "@/assets/json/questionList.js";
import questionDetail from "@/assets/json/questionDetail.js";
import {getQuestionDetail} from "@/assets/js/utils.js";
import { Empty } from 'ant-design-vue';
export default {
  props: {
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {},
    },
    questionStepVisible: {
      type: Boolean,
      default: false,
    },
    questionArr:{//用于判断考试下面有多少道题目
        type:Array,
        default:()=>[]
    }
  },
   beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  data() {
    return {
      questionStepTitle: "选择题目步骤",
      questionListData: [],
      activeIndex: null,
      treeData: [],
      stepData:[],
      showLine: true,
      showIcon: false,
      activeStepIndex:null,
      submitData:{},
    };
  },
  mounted () {
    this.getQuestionList();
  },
  methods: {
    getQuestionList(){
        var allQuestion = questionList()
        if(this.questionArr.length>0){
            var arr = []
            allQuestion.forEach((item) => {
                this.questionArr.forEach(list =>{
                    if(list === item.id) {
                        arr.push(item)
                    }
                })
            });
            this.questionListData = arr
        } else {
            this.questionListData = allQuestion
        }
    },
    onTreeSelect(checkedKeys,e) {
      this.stepData = e.selectedNodes[0].data.props.nodeList;
    },
    selectQuestionClick(item, index) {
      //选择题目
      //需要根据真实数据进行修改
      this.activeIndex = index;
      this.treeData = getQuestionDetail(item.id);
      this.submitData.questionId = item.id
    },
    selectStep(item,index){//选择步骤
         this.activeStepIndex = index;
         this.submitData.stepId = Number(item.nodeId)
    },
    submitInform() {
        if(this.submitData.stepId){
            this.$emit("selectInform",this.submitData)
        } else {
            this.$message.error('请选择题目步骤');
        }
    },
    //关闭弹框
    closeDraw() {
      this.$emit("closeFunc");
    },
  },
  watch: {
    questionStepVisible(n) {
      if (n) {
          this.activeIndex = null
          this.activeStepIndex = null
          this.treeData = []
          this.stepData=[]
          this.submitData={}
          this.getQuestionList();
      } else {
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.select-content {
  height: 500px;
  overflow: hidden;

  .section-content {
    height: 100%;
    border: 1px solid #ebedf0;

    .section-title {
      text-align: center;
      font-size: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #ebedf0;
    }

    .section-list {
      height: calc(100% - 45px);
      width: 100%;
      overflow: hidden;

      ul {
        width: 100%;
        height: 100%;
        overflow: auto;
      }

      li {
        padding: 5px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        //border-bottom: 1px solid #e8e8e8;
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        border-radius: 2px;
        span {
            display: inline-block;
            height: 24px;
            margin: 0;
            padding: 0 5px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            text-decoration: none;
            vertical-align: top;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width:100%;
        }
      }

      li.active {
          span {
              background-color: #bae7ff;
          }
        
      }
    }
    .step {
        li {
            
        }
    }
  }
}
</style>